<template>
  <div class="page-bg">
    <el-divider></el-divider>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">项目名称</label></div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          {{project.name}}
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">开始时间</label>
      </div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          {{project.startTime}}
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">结束时间</label>
      </div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          {{project.endTime}}
        </div>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">项目负责人</label>
      </div>
      <div class="weui-cell__bd">
        <div class="weui_cell_bd weui_cell_primary">
          {{project.managerName}}
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="row">
      <span class="v-center">
          <svg class="icon taskIcon" aria-hidden="true">
            <use xlink:href="#iconrenwu"></use>
          </svg>
          项目内容
        </span>
    </div>
    <el-divider></el-divider>
    <div class="weui-cell">{{project.content}}</div>
    <el-divider></el-divider>
    <div class="row">
      <span class="v-center">
          <svg class="icon taskIcon" aria-hidden="true">
            <use xlink:href="#iconrenwu1"></use>
          </svg>
          考核指标
        </span>
    </div>
    <el-divider></el-divider>
    <div class="weui-cell">{{project.target}}</div>
    <el-divider></el-divider>
    <div class="row">
      <span class="v-center">
        <svg class="icon manageIcon" aria-hidden="true">
          <use xlink:href="#iconZ"></use>
        </svg>
        课题安排
      </span>
    </div>
    <el-divider></el-divider>
    <div v-for="item of taskList" :key="item.id" >
      <div class="row" @click="goTask(item.name,item.id)">
          <span class="taskName">
            <svg class="icon projectIcon" aria-hidden="true">
              <use xlink:href="#icondian3"></use>
            </svg>
            {{item.name}}
          </span>
        <span class="delIcon" >
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconicon_signal"></use>
            </svg>
            {{item.leaderName}}
          </span>
      </div>
      <el-divider></el-divider>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'projectDetail',
  data () {
    return {
      project: '',
      taskList: []
    }
  },
  methods: {
    getProject () {
      // axios.get('/static/testData/project.json')
      axios.get(this.url + '/project/id/' + sessionStorage.getItem('pid'))
        .then(this.getProjectSucc)
    },
    getProjectSucc (res) {
      if (res.status === 200) {
        res = res.data
        this.project = res
      } else alert(res.data)
    },
    getTaskList () {
      // axios.get('/static/testData/module.json')
      axios.get(this.url + '/module/project/' + sessionStorage.getItem('pid'))
        .then(this.getTaskListSucc)
    },
    getTaskListSucc (res) {
      if (res.status === 200) {
        res = res.data
        this.taskList = res
      }
    },
    goTask (taskName, taskID) {
      sessionStorage.setItem('taskName', taskName)
      sessionStorage.setItem('taskID', taskID)
      this.$router.push('/task')
    }
  },
  mounted () {
    this.getProject()
    this.getTaskList()
  }
}
</script>

<style lang="stylus" scoped>
  .taskName
    margin-left .2rem
  .row
    margin-top .6rem
    margin-bottom .6rem
  .taskIcon
    margin-right .5rem
    color #16b0ff
  .delIcon
    float right
    margin-right .5rem
  .projectIcon
    margin-right .2rem
  .addTaskIcon
    float: right
    font-size 19.9px
    margin-right .9rem
    margin-top .18rem
    color black
  .manageIcon
    margin-right .5rem
    color #16b0ff
    font-size 28px
</style>
